<template>
	<div class="wode">
		<div class="wode_top">
			<div class="wode_top_message clear2">
				<div class="wode_top_messageImg" @click="jump('ewm')">
					<img src="../../../../static/img/images/wode3.png" />
				</div>
				<div class="wode_top_messageImg">
					<img src="../../../../static/img/images/wode2.png" />
					<span class="transform09">0</span>
				</div>
			</div>
			<div class="wode_top_head">
				<div class="wode_top_headImg">
					<img :src='peopleList.head_imgurl' class="wode_top_headImg1" />
					<img src="../../../../static/img/images/wode4.png" class="wode_top_headImg2" />
				</div>
			</div>
			<div class="wode_top_text">
				{{peopleList.nickname}}
			</div>
			<div class="wode_top_state">
				<div class="wode_top_state1 align_center" :class="peopleList.type==1?'wode_top_state2':''">
					<img :src="peopleList.type==1?'../../../../static/img/images/wode5_2.png':'../../../../static/img/images/wode5.png'" />
					匠探
				</div>
				<div class="wode_top_state1 align_center" style="margin: 0 1.5rem;" :class="peopleList.type==3?'wode_top_state2':''">
					<img :src="peopleList.type==3?'../../../../static/img/images/wode5_2.png':'../../../../static/img/images/wode5.png'" />
					匠商
				</div>
				<div class="wode_top_state1  align_center" :class="peopleList.type==4?'wode_top_state2':''">
					<img :src="peopleList.type==4?'../../../../static/img/images/wode5_2.png':'../../../../static/img/images/wode5.png'" />
					匠主
				</div>
				<!--<div class="wode_top_state1 wode_top_state2 align_center">
					<img src="../../../../static/img/images/wode5_2.png" />
					匠主
				</div>-->
			</div>
		</div>
		<div class="wode_order flex align_center">
			<span class="wode_order_left">我的订单</span>
			<span class="wode_order_right flex1">全部订单</span>
			<i class="el-icon-arrow-right"></i>
		</div>
		<div class="wode_message clear2">
			<div v-for="(data,key) in wd_m" class="wode_message_div">
				<div class="wode_message_img">
					<img :src='data.img' />
					<span>{{data.num}}</span>
				</div>
				<div class="wode_message_text">{{data.name}}</div>
			</div>
		</div>
		<div class="wode_address flex align_center">
			<span class="wode_address_left">地址管理</span>
			<span class="wode_address_right flex1">管理收货地址</span>
			<i class="el-icon-arrow-right"></i>
		</div>
		<div class="wode_content clear2">
			<div class="wode_content_div" v-for="(data,key) in wd_c" @click="jump(data.url)">
				<div class="wode_content_img">
					<img :src="data.img" />
				</div>
				<div class="wode_content_text">
					{{data.name}}
				</div>
			</div>
			
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from '../../common/footer.vue';
	export default {
		components: {
			vFooter
		},
		watch:{
			systemList(val){
				console.log(val)
			}
		},
		data: function() {
			return {
				wd_m:[{
					'name':'待付款',
					'img':'../../../../static/img/images/wd_m1.png',
					'num':0,
				},{
					'name':'待发货',
					'img':'../../../../static/img/images/wd_m2.png',
					'num':0,
				},{
					'name':'待收货',
					'img':'../../../../static/img/images/wd_m3.png',
					'num':0,
				},{
					'name':'收藏商品',
					'img':'../../../../static/img/images/wd_m4.png',
					'num':0,
				}],
				wd_c:[{
					'name':'福利社区',
					'img':'../../../../static/img/images/wd_content1.png',
					'url':'welfare'
				},{
					'name':'我是匠探',
					'img':'../../../../static/img/images/wd_content2.png',
					'url':'register'
				},{
					'name':'财务中心',
					'img':'../../../../static/img/images/wd_content3.png',
					'url':'finance'
				},{
					'name':'经营管理',
					'img':'../../../../static/img/images/wd_content4.png',
					'url':'yuan'
				},{
					'name':'匠屋学堂',
					'img':'../../../../static/img/images/wd_content5.png',
					'url':''
				},{
					'name':'事业合作',
					'img':'../../../../static/img/images/wd_content6.png',
					'url':'register2'
				}]
			}
		},
		mounted() {
		},
		methods: {
			jump(url){
				if(url=='register2'&&this.peopleList.is_tube){
					this.$router.push({
	        			path: 'Jreturn',
					})
					return false;
				}
            	this.$router.push({
        			path: '/wode/'+url,
				})
            },
		}
	}
</script>

<style scoped>
	.wode{
		width: 100%;
	}
	.wode_top{
		background: url('../../../../static/img/images/wode1.jpg') no-repeat;
		background-size: 100%;
		width: 100%;
		padding-top: 1rem;
	}
	.wode_top_message{
		width: 100%;
	}
	.wode_top_messageImg{
		position: relative;
		float: right;
		width: 2rem;
		margin-right: 1.4rem;
	}
	.wode_top_messageImg img{
		display: block;
		width: 100%;
		
	}
	.wode_top_messageImg span{
		position: absolute;
		z-index: 1;
		top: -0.5rem;
		right: -0.5rem;
		display: inline-block;
		background: #f2380d;
		color: #fff;
		font-size: 1rem;
		width: 1.4rem;
		height: 1.4rem;
		text-align: center;
		line-height: 1.4rem;
		border-radius: 5rem;
	}
	.wode_top_head{
		margin-top: 2.3rem;
		width: 100%;
		text-align: center;
	}
	.wode_top_headImg{
		width: 6.8rem;
		height: 6.8rem;
		display: inline-block;
		position: relative;
		
		
	}
	.wode_top_headImg1{
		width: 6rem;
		height: 6rem;
		object-fit: cover;
		display: block;
		border-radius: 6rem;
		overflow: hidden;
		border: 0.4rem solid #f7bd40;
	}
	.wode_top_headImg2{
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
		width: 2rem;
		height: 2rem;
		border-radius: 3rem;
	}
	.wode_top_text{
		font-size: 1.7rem;
		color: #fff;
		line-height: 3rem;
		text-align: center;
	}
	.wode_top_state{
		text-align: center;
		width: 100%;
		padding: 1rem 0 3rem 0;
	}
	.wode_top_state1{
		display: inline-flex;
		font-size: 1.2rem;
		color: #fff;
		
	}
	.wode_top_state1 img{
		height: 1.3rem;
		margin-right: 0.5rem;
	}
	.wode_top_state2{
		color: #f7bd40;
	}
	.wode_order{
		width: 92%;
		padding: 0 4%;
		height: 5rem;
		border-bottom: 0.1rem solid #1b1a1f;
	}
	.wode_order_left{
		font-size: 1.7rem;
		color: #000;
	}
	.wode_order_right{
		font-size: 1.5rem;
		color: #cccccc;
		text-align: right;
	}
	.wode_order i{
		font-size: 1.7rem;
		font-weight: bold;
	}
	.wode_message{
		width: 92%;
		padding: 1.4rem 4%;
		border-bottom: 0.1rem solid #1b1a1f;
	}
	.wode_message_div{
		width: 25%;
		float: left;
		text-align: center;
	}
	.wode_message_img{
		position: relative;
		width: 35%;
		margin: 0 auto;
	}
	.wode_message_img img{
		display: block;
		width: 100%;
		
	}
	.wode_message_img span{
		position: absolute;
		z-index: 1;
		top: -0.5rem;
		right: -0.5rem;
		display: inline-block;
		background: #000;
		color: #fff;
		font-size: 1rem;
		width: 1.4rem;
		height: 1.4rem;
		text-align: center;
		line-height: 1.5rem;
		border-radius: 5rem;
	}
	.wode_message_text{
		font-size: 1.4rem;
		line-height: 1.6rem;
		margin-top: 0.8rem;
		text-align: center;
		color: #000;
		
	}
	.wode_address{
		width: 92%;
		padding: 0 4%;
		height: 5rem;
		margin-top: 0.8rem;
		border-top: 0.1rem solid #1b1a1f;
		border-bottom: 0.1rem solid #1b1a1f;
	}
	.wode_address_left{
		font-size: 1.7rem;
		color: #000;
	}
	.wode_address_right{
		font-size: 1.5rem;
		color: #cccccc;
		text-align: right;
	}
	.wode_address i{
		font-size: 1.7rem;
		font-weight: bold;
	}
	.wode_content{
		margin: 1rem 0;
		width: 100%;
		overflow: hidden;
	}
	.wode_content_div{
		width: 33.3%;
		float: left;
		margin-top: -0.1rem;
		box-sizing: border-box;
		text-align: center;
		padding: 2rem 0;
		border-right: 0.1rem solid #000000;
		border-top: 0.1rem solid #000000;
	}
	.wode_content_div:nth-child(3n){
		border-right: 0
	}
	.wode_content_img{
		width: 20%;
		margin: 0 auto;
	}
	.wode_content_img img{
		width: 100%;
		display: block;
	}
	.wode_content_text{
		font-size: 1.5rem;
		color: #000;
		height: 3rem;
		line-height: 3rem;
	}
</style>